<template>
  <ul class="wztypeUl" v-if="ArticleTypes">
    <li class="wztype liBgc" @click="liClick(0, '')">全部</li>
    <li
      class="wztype"
      v-for="(item, index) in ArticleTypes"
      @click="liClick(index + 1, item)"
      :key="index"
    >
      {{ item }}
    </li>
  </ul>
  <div class="nr" v-if="articleList">
    <Timeline>
      <TimelineItem
        v-for="item in articleList.records"
        @click="goArticle(item.id, item.encryption)"
        :key="item.id"
      >
        <template #dot>
          <Image
            :src="item.img"
            lazy
            style="width: 60px; height: 50px; margin-left: -10px"
          >
            <template #placeholder>
              <div class="imgLoading"></div>
            </template>
          </Image>
        </template>
        <div class="timeItem">
          <div class="modal">
            <h3 class="title">
              {{ item.title }}
            </h3>
            <p class="time">📅 {{ item.creationTime }}</p>
          </div>
        </div>
      </TimelineItem>
    </Timeline>

    <el-pagination
      @current-change="fyChange(articleList.current)"
      v-model:current-page="articleList.current"
      background
      layout="prev, pager, next"
      :total="parseInt(articleList.total)"
      :page-size="8"
    />
  </div>

  <!-- 加载动画 -->
  <div class="loaderET" v-else>
    <div class="loaderMiniContainer">
      <div class="barContainer">
        <span class="bar"></span>
        <span class="bar bar2"></span>
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 101 114"
        class="svgIcon"
      >
        <circle
          stroke-width="7"
          stroke="black"
          transform="rotate(36.0692 46.1726 46.1727)"
          r="29.5497"
          cy="46.1727"
          cx="46.1726"
        ></circle>
        <line
          stroke-width="7"
          stroke="black"
          y2="111.784"
          x2="97.7088"
          y1="67.7837"
          x1="61.7089"
        ></line>
      </svg>
    </div>
  </div>

  <!-- 抽屉 -->
  <ArticleDrawer />
</template>
<script setup>
const axios = inject("axios");
import variable from "../../js/variable";
const ArticleDrawer = defineAsyncComponent(() => import("./ArticleDrawer.vue"));

const router = useRouter();

const ArticleTypes = ref(null); //所有文章分类数据

onMounted(() => {
  //调用
  findArticleType();
  findArticleByType(1);
});

//查询所有文章分类
function findArticleType() {
  axios
    .get("article/findArticleType")
    .then((response) => {
      let res = response.data;
      if (res.msg == "成功") {
        ArticleTypes.value = res.data;
      }
    })
    .catch();
}

const typeValue = ref(null);
//分类点击事件
function liClick(index, type) {
  typeValue.value = type;

  // 获取页面中所有的 <li> 元素
  const liElements = document.getElementsByClassName("wztype");
  // 转换成数组并使用 forEach
  Array.from(liElements).forEach((li) => {
    li.classList.remove("liBgc");
  });
  // 然后将选定的 <li> 元素添加 "liBgc" 类
  liElements[index].classList.add("liBgc");
}

const articleList = ref(null);
//根据分类查询文章列表
function findArticleByType(pageNum) {
  axios
    .post("article/findArticle", {
      pageNum: pageNum,
      type: typeValue.value,
      pageSize: 8,
      sfTop: false,
    })
    .then((response) => {
      let res = response.data;
      if (res.msg == "成功") {
        articleList.value = res.data;
      }
    })
    .catch();
}

//切换分类监听
watch(
  () => typeValue.value,
  (newV, oldV) => {
    findArticleByType(articleList.current);
  }
);

//页码改变
function fyChange(pageNum) {
  findArticleByType(pageNum);
}

//打开文章
function goArticle(id, encryption) {
  if (encryption != 1) {
    router.push({ name: "Article", params: { id: id } });
  } else {
    variable.wzDrawerStzte.value = true;
    variable.chouTiArticle.value.id = id;
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.wztypeUl {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.wztype {
  margin-left: 5px;
  padding: 3px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}

.liBgc {
  background-color: #425aef;
  color: #fff;
}

.nr {
  min-height: 1000px;
  padding: 50px;
  user-select: none;
}

.time {
  padding-bottom: 15px;
  color: #b9b9b9;
}

.title {
  letter-spacing: 1px;
  color: #474747;
}

.timeItem {
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  background-position: 50% 50%;
  margin: -30px 0 40px 40px;
}

.modal {
  border-radius: 10px;
  padding: 10px 0 1px 10px;
  width: 100%;
  height: 100%;
}

/* -------------loader------------------------ */
.loaderET {
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loaderMiniContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 130px;
  height: fit-content;
}
.barContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  background-position: left;
}
.bar {
  width: 100%;
  height: 8px;
  background: linear-gradient(
    to right,
    rgb(161, 94, 255),
    rgb(217, 190, 255),
    rgb(161, 94, 255)
  );
  background-size: 200% 100%;
  border-radius: 10px;
  animation: bar ease-in-out 3s infinite alternate-reverse;
}
@keyframes bar {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
.bar2 {
  width: 50%;
}
.svgIcon {
  position: absolute;
  left: -25px;
  margin-top: 18px;
  z-index: 2;
  width: 70%;
  animation: search ease-in-out 3s infinite alternate-reverse;
}
@keyframes search {
  0% {
    transform: translateX(0%) rotate(70deg);
  }

  100% {
    transform: translateX(100px) rotate(10deg);
  }
}
.svgIcon circle,
line {
  stroke: rgb(162, 55, 255);
}
.svgIcon circle {
  fill: rgba(98, 65, 142, 0.238);
}

/* -------------loader------------------------ */
</style>